<template>
	<view class="customer">
		<view class="all">
			<view>全部</view>
			<uni-badge :text="number"></uni-badge>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
				v-for="(item,index) in focusDataList" :key="index" @touchstart="ListTouchStart"
				@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="list-focus" @click="jumpCompanyInfo(item.name)">
					<view class="first-line">
						<view class="first-line-time">{{item.createTime}}</view>
					</view>
					<view class="second-line">
						<view class="second-line-company">{{item.name}}</view>
						<view class="second-line-phone">
							<image src="../../static/btn/icon2@3x.png" class="second-line-icon" v-if="item.hasMobile == true"></image>
							<image src="../../static/btn/icon3@3x.png" class="second-line-icon-one" v-if="item.hasPhone == true && item.hasMobile == false"></image>
							<image src="../../static/btn/icon3@3x.png" class="second-line-icon" v-if="item.hasPhone == true && item.hasMobile == true"></image>
						</view>
					</view>
					<view class="third-line">
						<view class="third-line-left">
							<view class="third-line-potential">{{item.potentialValue}}潜力值</view>
							<view class="third-line-gps">
								<image src="../../static/btn/icon4@3x.png" class="third-line-gps-icon"></image>
								<view>{{item.province}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="move">
					<view class="bg-grey" @click="top(index,item)">置顶</view>
					<view class="bg-red" @click="del(index,item)">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		focusList,delFocus
	} from '../../models/customer.js'
	import {
		uniBadge
	} from "@dcloudio/uni-ui"
	export default {
		components: {
			uniBadge
		},
		data() {
			return {
				focusDataList:[],
				selectParam:{
					pageIndex:0,
					pageSize:10
				},
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null,
				number: null,
				page:1,
			}
		},
		onShow() {
			this.focusDataList = []
			this.getFocusList()
		},
		onLoad() {
			this.getFocusList()
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			if (this.number < this.page * 10) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none', //如果要纯文本，不要icon，将值设为'none'
					duration: 2000 //持续时间为 2秒
				})
			} else {
				this.page++
				this.selectParam.pageSize = this.page * 10
				this.getFocusList()
			}
		},
		methods: {
			// 查询已关注的客户列表
			getFocusList(){
				focusList(this.selectParam).then((res) => {
					// console.log(res)
					this.focusDataList = res.data.results
					this.number = res.data.total
				})
			},
			//删除
			del(index,item){
				// console.log(index)
				// console.log(item)
				var param = {
					enterpriseName: item.name
				}
				delFocus(param).then((res) =>{
					// console.log(res.data)
					this.focusDataList.splice(index, 1)
					this.getFocusList()
				})
			},
			//置顶
			top(index){
				// console.log(index)
				this.focusDataList.unshift(this.focusDataList.splice(index , 1)[0]);
				 // this.PotentialData.splice(index, 1)
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 企业名称跳转至企业详情页面
			jumpCompanyInfo(name) {
				uni.navigateTo({
					// url: 'test?id=1&name=uniapp’
					url: '../enterpriseDetail/enterpriseDetail?name='+name
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "/colorui/main.css";
	@import "/colorui/icon.css";

	.customer {
		padding: 5rpx 15rpx 0;
	}

	.all {
		display: flex;
		flex-wrap: nowrap;
		font-size: 30rpx;
		margin-bottom: 20rpx;

		uni-badge {
			margin-left: 15rpx;
		}
	}

	.list-focus {
		display: flex;
		flex-wrap: wrap;
	}

	.first-line {
		width: 100%;
	}

	.first-line-time {
		font: 18rpx;
		color: #dcdcdc;
	}

	.second-line {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		// justify-content: space-between;
	}

	.second-line-company {
		font-size: 34rpx;
		width: 570rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.second-line-phone {
		height: 50rpx;
		width: 120rpx;
	}

	.second-line-icon {
		width: 40rpx;
		height: 40rpx;
		padding: 8rpx;
		margin: 0 8rpx;
	}
	.second-line-icon-one {
		width: 40rpx;
		height: 40rpx;
		padding: 8rpx;
		margin: 0 8rpx;
		float: right;
	}

	.third-line {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		height: 50rpx;
		width: 100%;
		justify-content: space-between;
		padding: 0 26rpx 10rpx;
	}

	.third-line-left {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
		width: 420rpx;
		justify-content: space-between;
		margin-left: -25rpx;
	}

	.third-line-potential {
		font-size: 28rpx;
		color: red;
	}

	.third-line-gps {
		height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.third-line-gps-icon {
		width: 40rpx;
		height: 35rpx;
		padding: 0rpx 10rpx;
	}
</style>
